<template>
	<view class="wrap-wallet-info">
		<view class="list flex">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex column align-center just-center" @click="onItem(item)">
					<view class="title f-24">{{ item.title }}</view>

					<view class="num f-30 fBold">{{ userInfo[item.key] || 0 }}</view>
				</view>
			</block>
		</view>

		<view
			class="redbag-bg bg-img-set"
			:style="'background-image: url(' + $staticImagePath('mine/wallet_bottom_bg.png') + ');'"
		>
			<view class="redbag-content flex align-center just-between">
				<image class="icon" :src="$staticImagePath('mine/wallet_redbag.png')" />

				<view class="desc-bg flex align-center">
					<view class="fBold f-32">红包余额</view>

					<view class="f-26">可消费 可提现</view>
				</view>

				<view class="recharge-btn f-24" @click="onRecharge">立即充值</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 用户信息
			 */
			userInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				list: [
					{
						title: "优惠券",
						key: "coupon_count",
						url: "/pages/user/coupon/mycard",
					},
					{
						title: "钱包",
						key: "total_money",
						url: "/pages/mine/wallet/wallet",
					},
					{
						title: "收藏",
						url: "/pages/user/collect",
						key: "collect_count",
					},
					{
						title: "关注",
						url: "/pages/user/follow",
						key: "concern",
					}
				],
			};
		},
		methods: {
			/**
			 * 充值
			 */
			onRecharge() {
				this.$jump.to("/pages/mine/wallet/recharge");
			},
			/**
			 * 点击
			 */
			onItem(item) {
				this.$jump.to(item.url);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-wallet-info {
		width: 100%;
		overflow: hidden;
		background-color: white;
		border-radius: 16rpx;
		overflow: hidden;
		padding-top: 30rpx;

		.list {
			width: 100%;
			overflow: hidden;

			.item {
				flex: 1;
				overflow: hidden;
				gap: 17rpx;

				.title {
					color: #545454;
				}

				.num {
					color: #121212;
				}
			}
		}

		.redbag-bg {
			margin-top: 20rpx;
			width: 100%;
			height: 122rpx;
			overflow: hidden;
			padding: 20rpx 30rpx 0rpx 35rpx;
			box-sizing: border-box;

			.redbag-content {
				width: 100%;
				height: 100%;
				overflow: hidden;

				.icon {
					width: 80rpx;
					height: 80rpx;
				}

				.desc-bg {
					margin-left: 17rpx;
					margin-right: 17rpx;
					flex: 1;
					overflow: hidden;
					gap: 18rpx;
					color: #fdeaca;
				}

				.recharge-btn {
					width: 142rpx;
					height: 52rpx;
					line-height: 52rpx;
					text-align: center;
					overflow: hidden;
					border-radius: 26rpx;
					color: #64420f;
					background: linear-gradient(to right, #feda9d, #fee4b2);
				}
			}
		}
	}
</style>
